<template>
  <div class="OneVOne" v-show="isShow">
    <div class="title">
      {{ "趣味闯关" }}
    </div>
    <!-- <div class="searchPK">
      <router-link to="/SearchPK">搜索用户PK</router-link>
    </div>
    <div class="selectPK">
      <router-link to="/SelectPK">选择用户PK</router-link>
    </div> -->
    <div class="test">
      <el-radio-group v-model="radio1">
        <el-button
          type="success"
          icon="el-icon-star-off"
          round
          @click="$router.push('/SimpleModel')"
        >
          简单模式
        </el-button>

        <el-button
          type="warning"
          icon="el-icon-star-off"
          round
          @click="$router.push('/SelectPK')"
        >
          中等模式
        </el-button>
        <el-button
          type="danger"
          icon="el-icon-star-off"
          round
          @click="$router.push('/SelectPK')"
        >
          困难模式
        </el-button>
        <el-button
          style="margin-top:20px"
          type="info"
          icon="el-icon-star-off"
          round
          @click="$router.push('/index')"
        >
          返回主页
        </el-button>
      </el-radio-group>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow:false
    };
  },
      mounted () {
    if (this.$store.getters.getIsLogin) {
      this.isShow=true
    } else {
      this.$notify({
        title: '提示',
        message: '登录后才能查看挑战模式哦',
        type: 'warning',
        offset: 100,
        duration: 3000
      })
    }
  },
};
</script>


<style scoped>
.OneVOne {
  background: url(../../assets/interest.png);
  background-size: 100% 100%;
  margin-left: 10%;
  margin-right: 10%;
  margin-bottom: 20px;
  width: auto;
  min-height: 700px;
  height: auto;
}

.title {
  color: #fafafa;
  width: 80%;
  font-size: 350%;
  top: 300px;
  left: 500px;
  position: absolute;
}

.searchPK {
  color: #fafafa;
  width: 55%;
  height: 20%;
  font-size: 300%;
  top: 400px;
  position: absolute;
}

.selectPK {
  color: #fafafa;
  width: 105%;
  height: 20%;
  font-size: 300%;
  top: 450px;
  position: absolute;
}

.test {
  color: #fafafa;
  width: 25%;
  height: 20%;
  font-size: 900%;
  top: 300px;
  left: 930px;
  margin-top: 50px;
  position: absolute;
}
</style>
